<template>
    <div class="main">
        <div class="content">
            <titles :subtitle="subtitle"  v-if="refresh"></titles>
            <div class="select">
                <div class="left" @click="jumpTo('/amount')">我的'往年当量'</div>
                <div class="center" @click="jumpTo('/basicvoluntary')">我的'基准志愿'</div>
                <div class="right" @click="jumpTo('/voluntarygroup')">我的'平行志愿'</div>
            </div>
        </div>
    </div>
</template>

<script>
import titles from '../components/Title.vue'
export default {
    components:{
        titles
    },
    data(){
        return{
            subtitle:"智能填报",
            refresh:true
        }
    },
    methods:{
        jumpTo(router){
            this.$router.push(router)
        }
    },
}
</script>

<style scoped>
.content{
    width: 1440px;
    min-height: 850px;
    background-color: #fff;
    margin: 100px auto;
    /* position: relative; */ 
    margin-bottom: 24px;
}
.select{
    display: flex;
    flex-direction: row;
    width: 1260px;
    margin: 0 auto;
    justify-content: space-around;
    padding-top: 48px;
    font-size: 42px;
    font-family: Source Han Sans;
    font-weight: 500;
    color: #FFFFFF;
}
.select .left{
    /* flex: 1; */
    width: 378px;
    height: 178px;
    background-color: rgba(243, 153, 25, 1);
    border-radius: 16px;
    box-shadow: 0px 10px 20px rgba(243, 153, 25, 0.35);
    line-height: 176px;
    cursor: pointer;
    transition-duration: 0.4s;
  
}
.left:hover{
    box-shadow: 0px 20px 30px rgba(243, 153, 25, 0.65);
    transform: translateY(-5px);
}
.select .center{
    /* flex: 1; */
    width: 378px;
    height: 178px;
    background-color: rgba(140, 81, 255, 1);
    border-radius: 16px;
    box-shadow: 0px 10px 20px rgba(140, 81, 255, 0.35);
    line-height: 176px;
    cursor: pointer;
    transition-duration: 0.4s;
    
}
.center:hover{
    box-shadow: 0px 20px 30px  rgba(140, 81, 255, 0.65);
    transform: translateY(-5px);
}
.select .right{
    /* flex: 1; */
    width: 378px;
    height: 178px;
    background-color: rgba(21, 184, 76, 1);
    border-radius: 16px;
    box-shadow: 0px 10px 20px rgba(21, 184, 76, 0.35);
    line-height: 176px;
    cursor: pointer;
    transition-duration: 0.4s;
}
.right:hover{
    box-shadow: 0px 20px 30px  rgba(21, 184, 76, 0.65);
    transform: translateY(-5px);
}
</style>